<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <meta charset="utf-8">
    <meta name="description" content="Convert SVG to Android 5.0 Lollipop VectorDrawable">
    <meta name="keywords" content="android,svg,convert,vectordrawable,drawable,lollipop">
    <meta name="author" content="Juraj Novák">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Android SVG to VectorDrawable</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="css/ribbons.min.css" rel="stylesheet">
    <link rel="image_src" href="img/icon.png" />

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<img src="img/icon.png" style="display: none;"/>

<div id="main-container" class="container">
    <div id="header">
        <img src="img/android.png" class="img-responsive pull-left" style="padding-right: 10px" />
        <h3>Android SVG to VectorDrawable</h3>
        <p>...one VectorDrawable to rule all screen densities</p>
    </div>

    <div id="compat-error" class="alert alert-danger" style="display: none">
        <div class="clearfix">
            <img src="img/seriously.png" class="img-responsive pull-left"/>
            <p>Sorry but your browser does not support some of new HTML5 features! Try using latest version of Google Chrome or
            Firefox.</p>
        </div>
    </div>

    <div class="panel panel-info" id="dropzone" onclick="dropzoneClick(this)">
        <div class="panel-body">
            <b>Drop file here</b> (or multiple files) to load content or click on this box to open file dialog.<br/>
            <div class="nouploadinfo small">No file will be uploaded - uses only JavaScript HTML5 FileReader.<br /><br /></div>

            <div class="nouploadinfo small alert alert-warning" style="display: inline-block">
                Keep in mind that Android does support svg files only partially.<br/>
                Please report wrongly converted SVGs by filling an issue on github.
            </div>
        </div>
    </div>

    <div id="output-box">
        <div id="button-box" class="btn-group">
            <button type="button" class="btn btn-primary btn-sm" onclick="download(this)">Download
            </button>
            <button type="button" class="btn btn-default btn-sm" onclick="selectAll(this)">Select all
            </button>
        </div>
        <pre class="pre-scrollable" id="output-code"></pre>
    </div>

    <div class="alert alert-danger box" style="display: none"></div>
    <div class="alert alert-warning box" style="display: none"></div>
    <div class="alert alert-info box" style="display: none"></div>
    <div class="alert alert-success box" id="success-box" style="display: none">
        <b>Success:</b> create xml file and copy all contents into res/drawable directory

        <div id="settings-area">
            <div class="checkbox">
                <label>
                    <input type="checkbox" class="opt-id-as-name" onchange="useIdAsName(this);">Import IDs from SVG as name
                </label>
            </div>

            <div class="checkbox">
                <label>
                    <input type="checkbox" class="clear-groups" onchange="clearGroups(this);">Remove empty groups without attributes
                </label>
            </div>

            <div class="checkbox">
                <label>
                    <input type="checkbox" class="bake-transforms" onchange="bakeTransforms(this);"><i>Bake transforms into path (experimental)</i>
                </label>
            </div>

            Android Support Library 23.2 has added support for VectorDrawable on Android API 7+ <a href="http://android-developers.blogspot.sk/2016/02/android-support-library-232.html" target="_blank">(more info)</a>
        </div>
    </div>
</div>

<div id="dlg-files" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Multiple SVG files (<span id="files-count"></span> files)</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Export</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="container">
    <footer>
        &copy; 2016, Juraj Novák, <a href="http://inloop.eu/" target="_blank">inloop.eu</a><br>
        <small>| <a href="http://inloop.github.io/">other projects</a> |</small>
    </footer>
</div>

<input type="file" id="dropzone-dialog" style="opacity: 0;display:none">

<div class="ribbon right grey hidden-xs">
    <a href="https://github.com/inloop/svg2android">Fork me on GitHub</a>
</div>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/cssjson.js"></script>
<script src='js/filereader.js'></script>
<script src='js/filesaver.min.js'></script>
<script src='js/colors.min.js'></script>
<script src="js/svg_shape_converter.js"></script>
<script src="js/flatten.js?v=1"></script>
<script src="js/jszip.min.js"></script>
<script src="js/main.js?v=24"></script>

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-56146020-1', 'auto');
    ga('send', 'pageview');

</script>

</body>
</html>